<template>
  <el-row class="container">
    <el-col :span="24">
      <h2>多人游戏设置</h2>
      <el-table
        border
        :data="listData.items">
        <el-table-column
          width="200"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editItem(scope.row.id)" >编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="inValidItem(scope.row.id)" v-if="scope.row.isValid === 1">无效化
            </el-button>
            <el-button
              type="success"
              size="mini"
              @click="validItem(scope.row.id)" v-if="scope.row.isValid === 0">有效化
            </el-button>
            <add-game-dialog :show.sync="editGameDialogShow" @success="initData" v-if="editId===scope.row.id" :isedit="true" :dataItem="scope.row" :editId.sync="editId"></add-game-dialog>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="活动名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="beginDate"
          label="开始日期"
          align="center">
        </el-table-column>
        <el-table-column
          prop="beginTime"
          label="开始时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="activityTime"
          label="持续时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="exhibitNum"
          label="找寻展品数量"
          align="center">
        </el-table-column>
        <el-table-column
          prop="repeatType"
          label="重复周期"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.repeatType | repeat}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="150"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.isValid === 0 ? '无效' : '有效'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          prop="createAt"
          label="创建日期"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.createAt | format}}</div>
          </template>
        </el-table-column>
      </el-table>
      <app-pagination
        :currentPage.sync="listData.page"
        :size.sync="listData.size"
        :total="listData.total"
        @handleCurrentChange="initData()"
        @handleSizeChange="initData()"
      ></app-pagination>
      <div class="add_btn_box">
        <el-button @click="addGameDialogShow = true" type="primary" size="mini">新增</el-button>
      </div>
    </el-col>
    <add-game-dialog :show.sync="addGameDialogShow" @success="initData" v-if="addGameDialogShow"></add-game-dialog>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppPagination from '@/components/AppPagination'
  import AddGameDialog from './AddGameDialog'


  export default {
    components: {
      'app-pagination': AppPagination,
      'add-game-dialog':AddGameDialog,
    },
    data() {
      return {
        listData: {
          page: 1,
          size: 10,
          items: null,
          total: null,
          totalPage: null,
        },
        addGameDialogShow:false,
        editGameDialogShow:false,
        editId:null,
      }
    },
    methods: {
      initData() {
        ApiClient.get('/backend/activity/list.do', {
          page: this.listData.page,
          size: this.listData.size,
        }).then(data => {
          //console.log(data)
          this.listData = data
        })
      },
      onSubmit() {
        this.listData.page = 1;
        this.listData.size = 10;
        this.initData()
      },
      validItem(id) {
        ApiClient.put(`/backend/activity/${id}/show.do`).then(data => {
          this.initData()
        }).catch()
      },
      inValidItem(id) {
        ApiClient.put(`/backend/activity/${id}/hide.do`).then(data => {
          this.initData()
        }).catch()
      },
      //状态切换（入库和展出）
      changeState(){
        this.listData.page=1;
        this.listData.size=10;
        this.initData()
      },
//      changeTypeId(){
//        this.listData.page=1;
//        this.listData.size=10;
//        this.initData()
//      },
      //编辑
      editItem(id){
        this.editId = id;
        this.editGameDialogShow = true;
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>
<style scoped lang="scss">
  .container {
    h2{
      margin-bottom: 20px;
    }
    .add_btn_box {
      margin-top: 20px;
      .el-button {
      }
    }
  }
</style>

